<template>
  <div class="select-component">
    
    <div v-if="datas.labelText" class="select-label" :style="{ width: datas.labelWidth }">
      <span v-if="datas.required" class="required-mark">*</span>
      {{ datas.labelText }}
    </div>
    
    <el-select
      v-model="datas.value"
      :placeholder="datas.placeholder"
      :multiple="datas.multiple"
      :disabled="datas.disabled"
      :clearable="datas.clearable"
      :collapse-tags="datas.collapseTags"
      :filterable="datas.filterable"
      :allow-create="datas.allowCreate"
      :style="{ width: datas.width }"
    >
      <el-option
        v-for="(option, index) in datas.options"
        :key="index"
        :label="option.label"
        :value="option.value"
      ></el-option>
    </el-select>
    
  </div>
</template>

<script>
export default {
  name: 'select',
  props: {
    datas: {
      type: Object,
      required: true
    }
  },
}
</script>

<style scoped lang="less">
.select-component {
  position: relative;
  width: 100%;
  
  .select-label {
    position: relative;
    margin-bottom: 8px;
    font-size: 14px;
    color: #606266;
    z-index: 1;
    
    .required-mark {
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  
  :deep(.el-select) {
    position: relative;
    z-index: 1;
  }
}
</style> 